<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正弦波</title>
</head>

<body>
    <canvas id="canvas" style="height: 200px;width: 200px; "></canvas>

</body>
<script src="../utils.js"></script>
<script>
    // 小球绘制
    class Ball {
        constructor(options) {
            this.x = 0;
            this.y = 0;
            this.r = 200;
            this.fillStyle = 'blue';
            this.strokeStyle = 'black';
            // 小球缩放
            this.scaleX = 1;
            this.scaleY = 1;
            // 小球透明度
            this.alpha = 1;
            Object.assign(this, options);
            return this;
        }
        render(ctx) {
            let { x, y, r, fillStyle, strokeStyle, scaleX, scaleY, alpha } = this;
            // 保存绘图环境
            ctx.save();
            // 开始绘制
            // ctx.beginPath();
            ctx.beginPath();
            ctx.translate(x / 2, y / 2);
            ctx.scale(scaleX, scaleY);
            ctx.strokeStyle = strokeStyle;
            ctx.fillStyle = fillStyle;

            ctx.globalAlpha = alpha;

            ctx.arc(0, 0, r, 0, Math.PI * 2);


            ctx.fill();
            ctx.stroke();
            ctx.restore();
            ctx.closePath();
            return this;
        }
    }
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let w = canvas.width = 1000;
    let h = canvas.height = 1000;
    console.log(w, h);
    let ball = new Ball({
        x: w / 2,
        y: h / 2,
        r: 50,
        fillStyle: 'red',
        strokeStyle: 'black',
        scaleX: 1,
        scaleY: 1,
        alpha: 1
    });
    ball.render(ctx);
    let a = 100;
    let d = h / 2;
    let angle = 10;

    // 平滑移动
    function move() {
        // y=asin(bx+c)+d
        ctx.clearRect(0, 0, w, h);
        window.requestAnimationFrame(move);
        ball.x = a * Math.sin(angle) + d;
        angle += 0.05;
        // 弧度的取值为0-2PI，如果超了2PI，就取余数，即余数为0-2PI。
        angle %= Math.PI * 2;
        ball.render(ctx);
    }

    window.requestAnimationFrame(move);


    // 线性运动
    let ball2 = new Ball({
        x: w / 2,
        y: h / 2,
        r: 50,
        fillStyle: 'blue',
        strokeStyle: 'black',
        scaleX: 1,
        scaleY: 1,
        alpha: 1
    });
    ball2.render(ctx);
    angle2 = 0;
    // 平滑移动
    function move2() {
        // y=asin(bx+c)+d
        ctx.clearRect(0, 0, w, h);
        window.requestAnimationFrame(move2);
        // x 和y轴同时移动
        ball2.x += 0.5;
        ball2.y = 60 * Math.sin(angle2) + h / 2;
        angle2 += 0.05;

        // 弧度的取值为0-2PI，如果超了2PI，就取余数，即余数为0-2PI。
        angle2 %= Math.PI * 2;
        ball2.render(ctx);
    }

    window.requestAnimationFrame(move2);

    // 脉冲运动，实现平滑的放大缩小
    let ball3 = new Ball({
        x: w / 2,
        y: h / 2,
        r: 50,
        fillStyle: 'green',
        strokeStyle: 'black',
        scaleX: 1,
        scaleY: 1,
        alpha: 1
    });

    let angle3 = 0;
    ball3.render(ctx);
    function move3() {
        ctx.clearRect(0, 0, w, h);
        window.requestAnimationFrame(move3);
        // 计算缩放比
        let scale = Math.sin(angle3) * 50 + h / 2;
        // console.log('scale', scale);
        angle3 += 0.05;
        angle3 %= Math.PI * 2;
        ball3.scaleX = ball3.scaleY = scale / 200;
        ball3.render(ctx);
    }

    window.requestAnimationFrame(move3);
</script>

</html>